<template>
  <div class="dialogForm-container">
    <el-dialog
      :title="dialogForm.id ? '修改单位' : '添加单位'"
      :visible.sync="dialogFormVisible"
      width="35%"
    >
      <el-form
        ref="dialogForm"
        label-width="80px"
        size="small"
        :model="dialogForm"
      >
        <!-- 单位名称 -->
        <el-form-item prop="name" label="单位名称">
          <el-input
            v-model="dialogForm.name"
            autocomplete="off"
            style="width: 80%"
          />
        </el-form-item>

        <!-- 单位状态 -->
        <el-form-item prop="flag" label="单位状态">
          <el-radio v-model="dialogForm.flag" :label="true">启用</el-radio>
          <el-radio v-model="dialogForm.flag" :label="false">禁用</el-radio>
        </el-form-item>
      </el-form>

      <!-- 确认与取消按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button
          size="small"
          @click="dialogFormVisible = false"
        >取 消</el-button>
        <el-button type="primary" size="small" @click="add()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'DialogForm',
  data() {
    return {
      // 控制弹框的显示与隐藏
      dialogFormVisible: false,
      // 存放表单数据
      dialogForm: {
        name: '',
        flag: true
      }
    }
  },
  methods: {
    // 重置表单并显示弹窗
    async dialogFormOn() {
      // 显示表单
      this.dialogFormVisible = true
      // 重置表单
      this.$nextTick(() => {
        // resetFields只能重置显示在表单的数据（id，不能被重置）
        this.dialogForm.id = ''
        this.$refs.dialogForm.resetFields()
      })
    },
    // 关闭弹窗
    async dialogFormOff() {
      // 关闭（隐藏）弹窗
      this.dialogFormVisible = false
    },
    // 添加单位信息
    async add() {
      // 添加单位信息
      if (!this.dialogForm.id) {
        const response = await this.$API.unit.add(this.dialogForm)
        if (response.code === 200) {
          // 成功提醒
          this.$message.success('单位信息添加成功！')
          // 关闭弹窗
          this.dialogFormOff()
          // 通知父组件，重新拉取单位信息
          this.$emit('getUnitList')
        } else {
          // 失败提醒
          this.$message.error('单位信息添加失败！')
        }
      } else {
        // 修改单位信息
        const response = await this.$API.unit.save(this.dialogForm)
        if (response.code === 200) {
          // 成功提醒
          this.$message.success('单位信息修改成功！')
          // 关闭弹窗
          this.dialogFormOff()
          // 通知父组件，重新拉取单位信息
          this.$emit('getUnitList')
        } else {
          // 失败提醒
          this.$message.error('单位信息修改失败！')
        }
      }
    }
  }
}
</script>
